<!--
 * @Author: shiweizhen 787632169@qq.com
 * @Date: 2025-06-19 10:42:14
 * @LastEditors: shiweizhen 787632169@qq.com
 * @LastEditTime: 2025-06-30 16:39:48
 * @Description: 
 * Copyright (c) 2025-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <div class="bg-[#f3f5f7] h-full w-full">
    <el-space :size="16" class="h-[60px] bg-white w-full fixed px-4">
      <el-button type="primary" @click="openExcelDiaolog()">新增excel表格</el-button>
      <el-button type="primary" @click="gotoProject">前往业务管理页面</el-button>
      <el-button type="primary" @click="gotoAgGrid">前往ag-grid页面</el-button>
    </el-space>
    <el-space :size="16" wrap
      class="project-list w-full max-h-[calc(100vh-60px-16px-16px)] p-4 bg-white mt-[76px] overflow-hidden overflow-y-auto">
      <el-card v-for="item in excelList" :key="item.id">
        <div class="flex flex-col cursor-pointer" @click="gotoExcel(item)">
          <div class="flex">
            <label class="label">excel名称</label>
            <span class="text">{{ item.name }}</span>
          </div>
          <div class="flex">
            <label class="label">excel描述</label>
            <span class="text text-ellipsis">{{ item.description }}</span>
          </div>
          <div class="flex">
            <label class="label">创建时间</label>
            <span class="text">{{ item.createTime }}</span>
          </div>
        </div>
        <template #footer>
          <el-button type="primary" size="small" @click="openExcelDiaolog(item)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(item)">删除</el-button>
        </template>
      </el-card>
    </el-space>
  </div>
  <ExcelDiaolog ref="excelDiaologRef" @close="getList" />
</template>

<script lang="ts" setup>
import ExcelDiaolog from './components/excel-diaolog.vue'
import { ExcelType } from '@/api/dashbord/types'
import { deleteExcel, getExcelList } from '@/api/dashbord'

const vm = getCurrentInstance()!
const { $modal } = vm.appContext.config.globalProperties
const router = useRouter()
const excelList = ref<ExcelType[]>([])

const getList = async () => {
  const res = await getExcelList()
  excelList.value = res.data.records
}

const gotoProject = () => {
  router.push('/project')
}

const gotoAgGrid = () => {
  router.push('/ag-grid')
}

const excelDiaologRef = ref<InstanceType<typeof ExcelDiaolog>>()
const openExcelDiaolog = (item?: ExcelType) => {
  excelDiaologRef.value?.handleOpen(item)
}


const gotoExcel = (item: ExcelType) => {
  const routeUrl = router.resolve({ path: '/univer-sheet' })
  window.open(routeUrl.href + '?id=' + item.id, '_blank')
}

const handleDelete = async (item: ExcelType) => {
  $modal.confirm('确定删除该Excel表格吗？', '提示').then(async () => {
    await deleteExcel(item.id!)
    $modal.msgSuccess('删除成功')
    getList()
  })

}

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.label {
  width: 80px;
  color: #303444;
  font-size: 14px;
  text-align: left;
  line-height: 23px;
}

.text {
  color: #303444;
  font-size: 14px;
  line-height: 23px;
  flex: 1;
}

.text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

:deep(.project-list .el-space__item) {
  width: calc(100% / 4 - 16px);
}
</style>